<template>
  <div class="registry-container">
    <div class="registry">
      <v-row>
        <v-col :md="6">
          <div class="form">
            <h2>账号注册</h2>
            <v-form @submit.prevent="registry" ref="form">
              <v-text-field
                v-model="form.username"
                label="用户名"
                light
                drak
                filled
                :rules="[rules.required, rules.username]"
                dense
              ></v-text-field>
              <v-text-field
                v-model="form.password"
                label="密码"
                light
                drak
                filled
                dense
                validate-on-blur
                :rules="[rules.required, rules.password]"
                type="password"
              ></v-text-field>
              <v-btn color="primary" depressed @click="registry"
              >立即注册
              </v-btn>
              <v-btn color="success" @click="$router.push('/courses')"
              >登录
              </v-btn>
            </v-form>
          </div>
        </v-col>
        <v-col :md="6">
          <div class="cover">
            <img src="/images/work.jpg" alt=""/>
          </div>
        </v-col>
      </v-row>
    </div>
  </div>
</template>

<script>
import {userRulesMixin} from '../mixins/userRules'
export default {
  layout: 'auth',
  mixins: [userRulesMixin],
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    async registry() {
      const valid = this.$refs.form.validate()
      if (valid) {
        const res = await this.$axios.$post('auth/registry', this.form)
        if (res.msg === 'success') {
          this.$message({
            type: 'success',
            message: '注册成功，请登录',
          })

          this.$router.push('courses')
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.registry-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  background-color: blueviolet;

  .registry {
    transform: translateY(100px);
    overflow: hidden;
    background-color: white;
    min-width: 800px;
    height: 400px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    display: grid;
    grid-template-columns: 2;

    .form {
      padding: 20px;

      h2 {
        text-align: center;
        color: rgb(0, 0, 0);
        margin-bottom: 10px;
      }
    }

    .cover {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
